<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="/StudentInfo/utils/image/favicon.ico"
	type="image/x-icon" />
<meta charset="UTF-8">
<title>选课管理系统</title>

<!-- 标题图标、CSS、js、jQ -->
<script type="text/javascript" src="/StudentInfo/utils/js/jquery-3.3.1.min.js"></script>
<!-- Loading Bootstrap -->
<link href="/StudentInfo/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link href="/StudentInfo/utils/css/flat-ui.css" rel="stylesheet">
<!-- Loading Flat UI JS -->
<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.min.js"></script>
<script type='text/javascript' src='/StudentInfo/utils/scripts/particles.js'></script>
<link href="/StudentInfo/utils/css/animate.css" rel="stylesheet">
</head>
<style type="text/css">
	.pageSize {
		padding: 5px;
		margin: 0 6px 0 6px;
		border-radius: 6px;
		background: #1abc9c;
		color: white;
		border: none;
	}

	.pageChose {
		display:flex;
		justify-content:center;
		align-items:center;
	}

    .active-bkg {
        background: repeating-linear-gradient(45deg, #232c34, transparent 100px);
    }

	.courseSize {
		font-size: 13px;
		font-weight: bolder;
	}

	.table td, .table th {
		vertical-align: middle;
	}

	.textShow {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

</style>

<body>
	<div id="particles-js">
		<canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas>
	</div>

	<jsp:include page="studentLeft.jsp" />
	<div class="container">
		<div class="row">
			<div class="col-md-12">
			<h5>选课</h5>
				<form name="studentquery" action="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=1&pageSize=${pageInfo.pageSize}" method="get">
					<div class="row">
						<div class="col-md-3">
							<strong>选课类型<br></strong>
							<select id="courseType" name="courseType" onchange="queryCourse()" class="form-control select select-primary select-block mbl select2">
								<option value="">全部</option>
								<option value="required" <c:if test="${requestScope.courseType=='required'}">selected</c:if>>必修</option>
								<option value="elective" <c:if test="${requestScope.courseType=='elective'}">selected</c:if>>选修</option>
							</select>
						</div>
						<div class="col-md-3">
							<strong>查询条件<br></strong>
							<select id="searchType" name="searchType" class="form-control select select-primary select-block mbl select2">
								<option value="all">全部课程</option>
								<option value="cId" <c:if test="${requestScope.searchType=='cId'}">selected</c:if>>按课程编号查询</option>
								<option value="cName" <c:if test="${requestScope.searchType=='cName'}">selected</c:if>>按课程名查询</option>
								<option value="tName" <c:if test="${requestScope.searchType=='tName'}">selected</c:if>>按授课教师查询</option>
							</select>
						</div>
						<div class="col-md-3">
							<strong>条件</strong>
							<div class="form-group has-feedback">
								<input id="value" type="text" name="value" value="${requestScope.value}" placeholder="输入值" class="form-control" />
							</div>
						</div>
						<div class="col-md-3 pos">
							<br><input type="submit" class="btn btn-primary" value="查询" />
						</div>
					</div>
				</form>

			</div>
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-12" >
						<div class="margin:0 15px">
						<table style="table-layout:fixed" class="table table-striped table-hover animated fadeIn myTable">
							<thead>
								<tr>
									<th width="7%">课程号</th>
									<th width="14%">课程名</th>
									<th width="10%">课程简介</th>
									<th width="9%">类型</th>
									<th width="18%">课程时间安排</th>
									<th width="8%">教室</th>
									<th width="8%">授课教师</th>
									<th width="6%">学分</th>
									<th width="6%">课时</th>
									<th width="7%">已选</th>
									<th width="7%">选择</th>
								</tr>
							</thead>
							<c:forEach var="course" items="${requestScope.courseVoList}">
								<tr>
									<td>${course.CId }</td>
									<td class="textShow" title="${course.CName}">${course.CName}</td>
									<td class="textShow" title="${course.CIntroduction}">${course.CIntroduction}</td>
									<td>${course.type}</td>
									<td>
										<div class="courseSize">${course.courseWeek}</div>
										<div class="courseSize textShow" title="${course.courseTime}">${course.courseTime}</div>
									</td>
									<td>${course.classRoom}</td>
									<td>${course.TName}</td>
									<td>${course.credits}</td>
									<td>${course.period}</td>
									<td>${course.selectedNum}/${course.totalNum}</td>
									<td>
										<c:if test="${course.haveSelected == 1}">
											<a class="btn btn-default" href="#" disabled="">已选</a>
										</c:if>
										<c:if test="${course.haveSelected == 0}">
											<c:if test="${course.selectedNum < course.totalNum}">
												<a class="btn btn-primary" href="/StudentInfo/StudentHandler/selcou/${course.CId}">选课</a>
											</c:if>
											<c:if test="${course.selectedNum >= course.totalNum}">
												<a class="btn btn-default" href="#" disabled="">已满</a>
											</c:if>
										</c:if>
									</td>
								</tr>
							</c:forEach>
						</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 显示分页信息 -->
		<!--分页文字信息  -->
		<jsp:include page="choosePageNo.jsp" />
		<!-- 分页条信息 -->
		<div class="col-md-12 pageChose">
			<nav aria-label="Page navigation">
			<ul class="pagination bg-primary">
				<li><a href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=1&pageSize=${pageInfo.pageSize}&searchType=${requestScope.searchType}&value=${requestScope.value}&courseType=${requestScope.courseType}">首页</a></li>
				<c:if test="${pageInfo.hasPreviousPage }">
					<li><a href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=${pageInfo.pageNum-1}&pageSize=${pageInfo.pageSize}&searchType=${requestScope.searchType}&value=${requestScope.value}&courseType=${requestScope.courseType}"
						aria-label="Previous"> <span aria-hidden="true">上一页</span>
					</a></li>
				</c:if>
				<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
					<c:if test="${page_Num == pageInfo.pageNum }">
						<li class="active"><a href="#">${page_Num}</a></li>
					</c:if>
					<c:if test="${page_Num != pageInfo.pageNum }">
						<li><a href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=${page_Num}&pageSize=${pageInfo.pageSize}&searchType=${requestScope.searchType}&value=${requestScope.value}&courseType=${requestScope.courseType}">${page_Num}</a></li>
					</c:if>
				</c:forEach>
				<c:if test="${pageInfo.hasNextPage }">
					<li><a href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=${pageInfo.pageNum+1}&pageSize=${pageInfo.pageSize}&searchType=${requestScope.searchType}&value=${requestScope.value}&courseType=${requestScope.courseType}"
						aria-label="Next"> <span aria-hidden="true">下一页</span>
					</a></li>
				</c:if>
				<li><a href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&searchType=${requestScope.searchType}&value=${requestScope.value}&courseType=${requestScope.courseType}">末页</a></li>
			</ul>
			</nav>
		</div>
	</div>
</body>

<script>
	$(".select2").select2({
		dropdownCssClass : 'dropdown-inverse'
	});
	function queryCourse(){
		let pageSize = $("#pageSize").val();
		let courseType = $("#courseType").val();
		let searchType = $("#searchType").val();
		let value = $("#value").val();
		let pageNum = ${pageInfo.pageNum};
		if (pageNum == 0) {
			pageNum = 1;
		}
		window.location.href="/StudentInfo/StudentHandler/queryStudentCourse?pageNo=" + pageNum + "&pageSize=" + pageSize
			+ "&courseType=" + courseType + "&searchType=" + searchType + "&value=" + value;
	}

</script>
<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
<script src="/StudentInfo/utils/scripts/bganimation.js"></script>
</html>